<template>
  <view class="m-message" :class="type === 'user' ? 'me' : 'chart'" @click="$emit('click')">
    <view class="message">
      {{ content }}
    </view>
  </view>
</template>
<script lang="ts" setup>
defineProps<{ type?: string; content: string }>();
</script>

<style lang="scss" scoped>
.m-message {
  display: flex;
  margin-bottom: 40rpx;
  &.me {
    justify-content: flex-end;
    .message {
      background: rgba($color: #000000, $alpha: 0.2);
    }
  }
  &.chart {
    justify-content: flex-start;
    .message {
      background: rgba($color: #fff, $alpha: 0.2);
    }
  }
  .message {
    padding: 20rpx;
    border-radius: 20rpx;
    color: #fff;
    font-size: 26rpx;
    max-width: 70%;
    word-break: break-all;
  }
}
</style>
